
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>城市三级联动</title>
</head>
<body>
	<form>
		<select name="pro">
			<option>--请选择省--</option>
		</select>
		<select name="ci" disabled>
			<option>--请选择市--</option>
		</select>
		<select name="country" disabled>
			<option>--请选择县/区--</option>
		</select>
	</form>
</body>
<script>
	// 获取表单
	var myform = document.forms[0];

	// 定义城市对象
	var city = new Object();
	city.item = {};
	city.add = function(name, value){
		this.item[name] = value;
	}

	//第一级：省、直辖市
	//第二级：省的地级市、直辖市
	//第三极：市的县/区
	city.add(0,['北京','河北','山东']); 
	// city.item[0] = ['北京','河北','山东'];
	// city.item[0_1] = ['北京'];

	//北京市
	city.add('0_1',['北京']); // selectedIndex = 1; 因为下拉菜单中有一个 --请选择市--
	city.add('0_1_1',['昌平','海淀','朝阳']);

	//河北省
	city.add('0_2',['石家庄','保定','邯郸']); //河北省的所有市
	city.add('0_2_1',['aaa','bbb','ccc']); //石家庄市的所有县和区

	
	// 把省添加到列表中
	for(var i in city.item[0]){
		var opt = document.createElement("option");
		opt.innerHTML = city.item[0][i];
		myform.pro.appendChild(opt); // 首先显示添加省级列表
	}

	// 选择省后，发生的动作：市级菜单可选；自动添加市级列表；县区菜单不可选
	myform.pro.onchange = function(){
		myform.ci.disabled = false;
		myform.country.disabled = true;
		myform.country.selectedIndex = 0; // selectedIndex 选择索引
		if(this.selectedIndex == 0){
			myform.ci.disabled = true;
		}
		myform.ci.innerHTML = "<option>--请选择市--</option>";
		var key = '0_' + this.selectedIndex;
		for(var i in city.item[key]){
			var opt = document.createElement("option");
			opt.innerHTML = city.item[key][i];
			myform.ci.appendChild(opt); // 省选择之后，自动添加市级列表
		}
	}

	// 选择市后，发生的动作
	myform.ci.onchange = function(){
		myform.country.disabled = false;
		if(this.selectedIndex == 0){
			myform.country.disabled = true;
		}
		myform.country.innerHTML = "<option>--请选择县/区--</option>";
		var key = '0_' + myform.pro.selectedIndex + '_' + myform.ci.selectedIndex;
		for(var i in city.item[key]){
			var opt = document.createElement("option");
			opt.innerHTML = city.item[key][i];
			myform.country.appendChild(opt); // 市选择之后，自动添加县区列表
		}
	}

	//alert(city.item['0_2_1'][1]);
</script>
</html>























